<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lzy">
    <title>lzy-</title>
 <style>
    html,body{
        height: 100%;
    }
    body{
        margin: 0;
    }
    main{
        width: 150px;
        height: 180px;
        margin: 100px auto;
        border: 1px solid gray;
        border-radius: 10px;
        overflow: hidden;
    }
    main input{
        display: inline-block;
        width: 50px;
    }
 </style>
 </head>
 <body>
    <main>
        <div>
            <input type="checkbox" /><span>全选</span>
            <a href="javascript:;">反选</a>
        </div>
        <div>
            <input type="checkbox" id="cb1" checked='false'/>1
        </div>  
        <div>
            <input type="checkbox" id="cb2" checked='false'/>2
        </div>
        <div>
            <input type="checkbox" id="cb3" checked='false'/>3
        </div>
        <div>
            <input type="checkbox" id="cb4" checked='false'/>4
        </div>
        <div>
            <input type="checkbox" id="cb5" checked='false'/>5
        </div>
        <div>
            <input type="checkbox" id="cb6" checked='false'/>6
        </div>
        
    </main>
 </body>
</html>
<script>
    var inputs = document.querySelectorAll('input');
    var fanxuan = document.querySelector('a');
    var span=document.querySelector('span');

    inputs[0].onclick=function(){
        var re=inputs[0].checked;
        if(re==true){
            for(var i=1;i<inputs.length;i++){
                inputs[i].checked=true;
                span.innerHTML='全不选';
                }
            }
        if(re==false){
            for(var i=1;i<inputs.length;i++){
                inputs[i].checked=false;
                span.innerHTML='全选';
                }
            }
        }
    // 反选
    fanxuan.onclick = function(){     
          for(var i=1;i<inputs.length;i++){  
                var id="cb"+i;
                console.log(id);
                var cbox=document.getElementById(id);
                console.log(cbox);
                if(cbox.checked){
                    cbox.checked=false;
                    }
                else{
                    cbox.checked=true;
                    }
        }
    }

    // 
      for(var i=1;i<inputs.length;i++){
            inputs[i].index=i;
            var index=0;
            inputs[i].onclick=function(){           
            if(inputs[this.index].checked==false){
                inputs[0].checked=false;
                span.innerHTML='全选';
             }
             for(var i=1;i<inputs.length;i++){
                //  console.dir(inputs[i].checked);
                 if(inputs[i].checked==true){
                     index++;
                     console.log(123);
                     console.log(index);
                     if(index==6){
                         inputs[0].checked=true;
                     }
                 }             
             }
             index=0;
            }         
        }


</script>
